<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'player.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<script type="text/javascript" src="<%=basePath %>js/jquery-1.7.2.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			var audio = $("#audio")[0];
			$(".SongName").click(function(){
				var filepath = $(this).attr("KV");
				$.ajax({
					url:'test03/play',
					data:{path:filepath},
					dataType:'json',
					success:function(data){
						alert(data);
					},
				});
				//$("#audio").attr("src","test03/play?id="+path);
				//audio.play();
			});
			audio.addEventListener('ended', function () {
        		$(".List .Single .SongName").each(function () {
        		
                		var IsBottom = $(this).parent(".Single").next(".Single").length == 0 ? true : false;  //检查是否是最尾端的歌曲
                		var NextSong;
                		if (IsBottom) {
                   			 NextSong = $(".Single").first().children(".SongName").attr("KV");
                		}else {
                    		NextSong = $(this).parent(".Single").next(".Single").children(".SongName").attr("KV");
                		}

                		$("#audio").attr("src","test03/play?id="+NextSong);
                		return false; //代表break
            		
        		});
    		}, false);
		});
	</script>
  </head>
  
  <body>
  	<div class="List">
  		<div class="Single"><span style="cursor:hand" class="SongName" KV="/music/Akito - 远すぎた空.mp3">test01.mp3</span></div>
  		<div class="Single"><span style="cursor:hand" class="SongName" KV="506AF8A168058471BA65EF40AD13414794D4AB451C889E4D6C961D41511D133F">test02.mp3</span></div>
  		<div class="Single"><span style="cursor:hand" class="SongName" KV="6FECC7BC5FBD4BDAA1CA0C5CD627519B94D4AB451C889E4D6C961D41511D133F">test03.mp3</span></div>
  		<div class="Single"><span style="cursor:hand" class="SongName" KV="6C0F1293923F750DEFEEE073DC11347794D4AB451C889E4D6C961D41511D133F">test04.mp3</span></div>
  		<div class="Single"><span style="cursor:hand" class="SongName" KV="649825ED3437B4CDF31D927E8DB77A6C94D4AB451C889E4D6C961D41511D133F">test05.mp3</span></div>

  	</div>
    <audio id="audio" controls="controls" autoplay="autoplay" src="<%=basePath%>/music/Akito - 远すぎた空.mp3"></audio>
    
  </body>
</html>
